<template>
  <h2>class</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">class</div>
    <div  class="zhtt-demo-card-body">
      <div class="div" :class="{ active: isActive }">isActive：{{isActive}}</div>
      <button class="zhtt-btn" @click="updateIsActive">updateIsActive</button>
    </div>
    <div class="zhtt-demo-card-footer">
     语法为 :class="{ active: isActive }"
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">class绑定多个</div>
    <div  class="zhtt-demo-card-body">
      <div class="div" :class="{ active: isActive, hasError: isError }">isActive：{{isActive}}，isError：{{isError}}</div>
      <button class="zhtt-btn" @click="updateIsActive">updateIsActive</button>
    </div>
    <div class="zhtt-demo-card-footer">
     语法为 :class="{ active: isActive, hasError: isError }"
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">class绑定对象</div>
    <div  class="zhtt-demo-card-body">
      <div class="div" :class="classObject">classObject：{{classObject}}</div>
      <button class="zhtt-btn" @click="updateIsActive">updateIsActive</button>
    </div>
    <div class="zhtt-demo-card-footer">
     语法为 :class="classObject"
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">class绑定computed对象</div>
    <div  class="zhtt-demo-card-body">
      <div class="div" :class="classObject2">classObject2：{{classObject2}}</div>
      <button class="zhtt-btn" @click="updateIsActive">updateIsActive</button>
    </div>
    <div class="zhtt-demo-card-footer">
     语法为 :class="classObject2"，<b>与上一个示例对比，发现上一个示例首次未启作用</b>
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">数组语法</div>
    <div  class="zhtt-demo-card-body">
      <div class="div" :class="classObject3">classObject3：{{classObject3}}</div>
      <div class="div" :class="[isActive ? 'active' : '', 'hasError']">数组中的表达式：:class="[isActive ? 'active' : '', 'hasError']</div>
      <div class="div" :class="[{ active: isActive }, 'hasError']">数组中的对象方式：:class="[{ active: isActive }, 'hasError']"</div>
      <button class="zhtt-btn" @click="updateIsActive">updateIsActive</button>
    </div>
    <div class="zhtt-demo-card-footer">
     语法为 :class="classObject3"
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      isActive:true,
      isError: false,
      classObject: {
        active: this.isActive,
        hasError: this.isError
      },
      classObject3:['active', 'hasError']
    }
  },
  computed:{
    classObject2(){
      return {
        active: this.isActive,
        hasError: this.isError
      }
    }
  },
  methods:{
    updateIsActive(){
      this.isActive = !this.isActive;
      this.isError = Math.random()>0.4;
      this.classObject = {active: this.isActive, hasError: this.isError};
    }
  }
}
</script>
<style scoped>
.hasError{
  color:red;
}
.active{
  background: #f2f2f2;
}
.div{
  font-size:20px;padding:10px;
}
</style>